<html>
<wicket:extend>
<script>
function toggleAlarm(x) {

	if(x == 1) {
		document.getElementById("alarm").setAttribute("class", "red-button right");
		document.getElementById("alarm").setAttribute("onclick", "toggleAlarm(0)");		
		document.getElementById("alarm").innerHTML = "Deactivate Alarm";
		document.getElementById("onoroff").innerHTML = "ON";
		document.getElementById("onoroff").style.color = "green";
	}
	else {
		document.getElementById("alarm").setAttribute("class", "green-button right");
		document.getElementById("alarm").setAttribute("onclick", "toggleAlarm(1)");				
		document.getElementById("alarm").innerHTML = "Activate Alarm";
		document.getElementById("onoroff").innerHTML = "OFF";		
		document.getElementById("onoroff").style.color = "red";
	}
	
}
</script>
<div class="top-links">

  <a class="green-button" href="#" wicket:id="SecurityPageLink">Security Main</a>
  <a class="gray-button" href="#" wicket:id="SecurityCamPageLink">Camera Feed</a>
  <a class="gray-button" href="#" wicket:id="SecurityRecPageLink">View Recordings</a>

  <a class="icon-right" href="#" onClick="helpPopUp();return false;"><img wicket:id="help" /></a>
  <a class="icon-right" href="#" onClick="window.location.reload();return false;"><img wicket:id="refresh" /></a>
  <a class="icon-right" href="#" onClick="window.print();return false;"><img wicket:id="printer" /></a>
  <div class="clear"></div>
</div>

<h1>Security Main</h1>

<div class="column-two">
  <div class="inner">
  	<form>
    <div class="box-inners">
   		<h2>Lock and Alarm Control</h2>
      <div style="margin-bottom:20px;">
        <div class="column-two">
          <a id="alarm" class="green-button right" onClick="toggleAlarm(1)" style="width:185px;margin-right:10px;cursor:pointer;">Activate Alarm</a>
        </div>
        <div class="column-two">
          <span class="medium black left" style="margin-left:10px;line-height:28px;">The alarm is currently <span id="onoroff" style="color:#FF0000;">OFF</span></span>
        </div>
        <div class="clear"></div>
			</div>
      
      <p class="info">Check a box below to automatically lock the corresponding door or window.</p>
      
      <div class="column-two">
        <div class="inner">
          <h4 class="dark-purple">Door Locks</h4>
          
          <div class="radio-wrapper" style="padding-left:10px;">
            <label for="checkbox"><input class="checkbox" type="checkbox" /><span>Front Door</span></label><div class="clear"></div>
            <label for="checkbox"><input class="checkbox" type="checkbox" checked="checked" /><span>Rear Door</span></label><div class="clear"></div>
            <label for="checkbox"><input class="checkbox" type="checkbox" /><span>Side Door</span></label><div class="clear"></div>
            <label for="checkbox"><input class="checkbox" type="checkbox" /><span>Storage Door</span></label>
          </div>
        </div>
      </div>
     	<div class="column-two">
      	<div class="inner">
          <h4 class="dark-purple">Window Locks</h4>
          
          <div class="radio-wrapper" style="padding-left:10px;">
            <label for="checkbox"><input class="checkbox" type="checkbox" /><span>Kitchen Window</span></label><div class="clear"></div>
            <label for="checkbox"><input class="checkbox" type="checkbox" /><span>Living Room Window</span></label><div class="clear"></div>
            <label for="checkbox"><input class="checkbox" type="checkbox" checked="checked" /><span>Bedroom Window</span></label><div class="clear"></div>
            <label for="checkbox"><input class="checkbox" type="checkbox" checked="checked" /><span>Bathroom Window</span></label>
          </div>
				</div>
      </div>
      <div class="clear"></div>
    
    </div>
    </form>
  </div>
</div>

<div class="column-two">
  <div class="inner">
    <div class="box">
      <h2>Front Door Camera Feed</h2>
	  
    	<center>
        <div style="width:450px; height:300px; overflow:hidden!important; text-align:center;">
        <object width="480" height="385">
          <param id="c11" name="movie" value="http://www.youtube.com/v/GLlO9RVfQQU?fs=1&amp;hl=en_US&autoplay=1"></param>
          <param name="allowFullScreen" value="true"></param>
          <param name="allowscriptaccess" value="always"></param>
          <embed id="c12" src="http://www.youtube.com/v/GLlO9RVfQQU?fs=1&amp;hl=en_US&autoplay=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"></embed>
        </object> 
        </div>
	  	</center>
      <div class="clear"></div>
    </div>
  </div>
</div>
<div class="clear"></div>

<div class="box">
  <h3>Security Log</h3>
  <form action="#" class="table-wrapper" method="get" name="tableform">
    <p class="show-count">
      Show&nbsp;
      <select>
        <option>10</option>
        <option>20</option>
        <option>30</option>
        <option>40</option>
      </select>
      &nbsp;Entries
    </p>
    <p class="showing">Showing 1 - 8 of 567 entries</p>
    <table cellpadding="0" cellspacing="0" class="sortable" width="100%">
      <thead>
        <tr>
          <th>Who?<a class="sort-asc" href="#">&nbsp;</a></th>
          <th>When?<a class="sort-desc" href="#">&nbsp;</a></th>
          <th>What?<a class="sort-desc" href="#">&nbsp;</a></th>
          <th>Actions<a class="sort-desc" href="#">&nbsp;</a></th>
        </tr>
      </thead>
      <tfoot>
        <tr>
          <th>Who?</th>
          <th>When?</th>
          <th>What?</th>
          <th>Actions</th>
        </tr>
      </tfoot>
      <tbody>
        <tr>
          <td>System</td>
          <td>Today @ 4:00pm</td>
          <td>Presence detected at front door.</td>
          <td>
            <a class="icon-left" wicket:id="SecurityPageLink" href="#">Security</a>
            <a class="icon-left" wicket:id="SecurityCamPageLink" href="#">Camera Feed</a>
            <a class="icon-left" wicket:id="SecurityRecPageLink" href="#">View Recordings</a>
            
          </td>
        </tr>
        <tr>
          <td>Home Owner 2</td>
          <td>Today @ 3:33pm</td>
          <td>Alarm deactivated.</td>
          <td>
            <a class="icon-left" wicket:id="SecurityPageLink" href="#">Security</a>
          </td>
        </tr>
        <tr>
          <td>Home Owner</td>
          <td>Today @ 3:00pm</td>
          <td>Alarm activated.</td>
          <td>
            <a class="icon-left" wicket:id="SecurityPageLink" href="#">Security</a>
          </td>
        </tr>
        <tr>
          <td>Home Owner</td>
          <td>Today @ 3:00pm</td>
          <td>Admin logged into system.</td>
          <td>
            <a class="icon-left" wicket:id="SecurityPageLink" href="#">Security</a>
            <a class="icon-left" wicket:id="LoginPageLink" href="#">Logout</a>                             
          </td>
        </tr>
        <tr>
          <td>Home Owner</td>
          <td>Today @ 2:00pm</td>
          <td>Admin logged out of system.</td>
          <td>
            <a class="icon-left" wicket:id="SecurityPageLink" href="#">Security</a>
            <a class="icon-left" wicket:id="LoginPageLink" href="#">Login</a>                   
          </td>
        </tr>
        <tr>
          <td>Home Owner</td>
          <td>Today @ 1:00pm</td>
          <td>Home Owner, has changed their password.</td>
          <td>
            <a class="icon-left" wicket:id="SecurityPageLink" href="#">Security</a>
            <a class="icon-left" wicket:id="SettingsPageLink" href="#">Settings</a>
          </td>
        </tr>
        <tr>
          <td>Home Owner</td>
          <td>Today @ 12:00pm</td>
          <td>Has modified their "afternoon" preset.</td>
          <td>
            <a class="icon-left" wicket:id="SecurityPageLink" href="#">Security</a>
            <a class="icon-left" wicket:id="SettingsPageLink" href="#">Settings</a>          
          </td>
        </tr>
        <tr>
          <td>System</td>
          <td>Today @ 12:00pm</td>
          <td>Presence detected at back door.</td>
          <td>
            <a class="icon-left" wicket:id="SecurityPageLink" href="#">Security</a>
            <a class="icon-left" wicket:id="SecurityCamPageLink" href="#">Camera Feed</a>
            <a class="icon-left" wicket:id="SecurityRecPageLink" href="#">View Recordings</a>
          </td>
        </tr>
      </tbody>
    </table>
    <p class="pagination">
      <a class="previous" href="#">&nbsp;</a>
      <span class="current">1</span>
      <a href="#">2</a>
      <a href="#">3</a>
      <a href="#">4</a>
      <a href="#">5</a>
      <a class="next" href="#">&nbsp;</a>
    </p>
    <p class="showing">Showing 1 - 8 of 567 entries</p>
    <div class="clear"></div>
	</form>
</div>

</wicket:extend>
</html>

